import React from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Button, Layout, theme } from "antd";
const { Header} = Layout;
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Space } from "antd";
import { Avatar } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { changeCollapsed } from "../../store/modules/collapsedStore";
export default function TopHeader() {
  //获取到当前登录的用户
  const users = JSON.parse(localStorage.getItem("token"));
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const items = [
    {
      label: (
        <p
          onClick={() => {
            localStorage.removeItem("token");
            window.location.reload(); //重新刷新页面
          }}
        >
          退出
        </p>
      ),
      key: "0",
    },
    {
      label: <p>{users.role.roleName}</p>,
      key: "1",
    },
  ];

  //从collaspedStore中获取collapsed
  const{collapsed}=useSelector(state=>state.collapsed)
  const dispatch=useDispatch()
  return (
    <div>
      <Header style={{ padding: 0, background: colorBgContainer }}>
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={()=>dispatch(changeCollapsed(!collapsed))}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
        />

        <div style={{ float: "right" }}>
          <span>欢迎{users.username}使用</span>
          <Dropdown menu={{ items }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <Avatar
                  size={34}
                  icon={<UserOutlined />}
                  style={{ margin: "0 8px" }}
                />
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
      </Header>
    </div>
  );
}
